<!-- 设计页面 -->
<template>
  <div class="design">
    <div :class="{'main':true}" :style="'background: url('+backgroundImage+') repeat;'" v-loading="iframeLoading">
      <iframe :class="{'none':isNone}" :src="iframeSrc" frameborder="0" :style="'width:'+width+';' + height"
        ref="iframeRender"></iframe>
    </div>
    <div class="compmenubox">
      <div class="compmenub">
       <DesignCompmenu />
       <div class="compmenuguide"><i class="el-icon-caret-right"></i></div>
      </div>
    </div>
    <DesignLeftOpteration />
    <DesignDialog />
    <WindowFunc />
  </div>
</template>

<script>
import BackgroundImage from '@/assets/images/devicebg.jpg'
import DesignMenu from '@/components/main/design/DesignMenu.vue'
import DesignDialog from '@/components/common/design/DesignDialog.vue'
import DesignLeftOpteration from '@/components/common/design/DesignLeftOpteration.vue'
import DesignCompmenu from '@/components/common/design/DesignCompmenu.vue'
// 公共方法
import * as DesignFunctions from '@/core/DesignFunctions.js'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'

import { mapGetters, mapState } from 'vuex'
import PubSub from 'pubsub-js'
// 引入 window[WindowType....] 方法
import WindowFunc from '@/components/common/source/WindowFunc.vue'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'

export default {
  created () {
    // 是否有页面的数据可以进行编辑操作
    VueFunctions.method(WindowType.IS_PAGE_DATA_DESING, (bool) => {
      PubSub.publish(PubsubType.PUBSUB_DESIGN_EDITOR_PAGE, bool)
    })
    // let vm = this
    // 渲染结束，结束 loading, 同时将当前页面的pageId回调至此
    VueFunctions.method(WindowType.IFRAME_LOADING_OVER, (pageId) => {
      this.iframeLoading = false
      // console.log(this.$refs['iframeRender'])
      // this.$refs['iframeRender'].contentWindow.abc()
      if (pageId > 0) {
        // 在回调后写入的 pageId 的同时，赋值dom节点至 vuex 上
        this.$store.dispatch('designSetIframePageId', pageId)
      }

      this.$store.dispatch('designSetIframeRef', this.$refs['iframeRender'])

      // 加载完成后推送消息
      PubSub.publish(PubsubType.PUBSUB_IFRAME_LOADING_OVER, { pageId: pageId, iframeRender: this.$refs['iframeRender'] })

      // 关闭所有的弹窗
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, { pageId: pageId })
    })
    // 更新组件状态
    VueFunctions.method(WindowType.UPDATE_COMPONENT_STATUS_1, (componentId, callback) => {
      let status = 1
      this.$post('/component/nocontainerdataandupdatestatus', { componentId, status }).then(response => {
        if (!response || parseInt(response) !== parseInt(componentId)) {
          this.$message.error('请求异常，请联系管理员！')
          callback()
        }
      })
    })
    // 获取 Design 路径path
    VueFunctions.method(WindowType.GET_VUE_DESIGNFUNCTIONS_GETDESIGNPATH, (path) => {
      return DesignFunctions.getDesignPath(this.$store.state.host.id, this.$store.state.site.site.id, path)
    })
    // 更换展示设备开启
    PubSub.subscribe(PubsubType.PUBSUB_CHANGE_DEVICE, (event, data) => {
      this.iframeLoading = true
      this.isNone = true
      if (data.device === 1) {
        this.width = '100%'
        this.height = ''
      } else if (data.device === 2) {
        this.width = '375px'
        this.height = 'min-height: 90vh; min-height:calc(100vh - 72px); margin-top: 24px;box-shadow: darkgrey 5px 5px 10px 5px;'
      }
      setTimeout(() => {
        this.isNone = false
      }, 500)
      setTimeout(() => {
        this.iframeLoading = false
      }, 1000)
      // 给到backendjs执行切换设备后的渲染动作
      BackendjsFunctions.changeDevice(data.device)
    })
    // 是的当前页面是否进入 loading 状态
    PubSub.subscribe(PubsubType.PUBSUB_CHANGE_DESIGN_IFRAME_LOADING, (event, data) => {
      this.iframeLoading = data
    })
    // 拿到外部链接图片对于的系统内的资源数据
    VueFunctions.method(WindowType.GET_EXTERNAL_LINKS_REPERTORIES, (externalLinks, callback) => {
      this.$jpost('/repertory/make-external-links', externalLinks).then(response => {
        callback(response)
      })
    })
  },
  mounted () {
    let code1 = 0
    let code2 = 0
    let code3 = 0
    window.onfocus = function () {
      code1 = 0
      code2 = 0
      code3 = 0
    }
    window.onblur = function () {
      code1 = 0
      code2 = 0
      code3 = 0
    }
    document.onkeydown = function (e) {
      let key = e.keyCode
      if (key === 66) {
        code3 = 1
      }
      if (key === 49) {
        code2 = 1
      }
      if (key === 18) {
        code1 = 1
        e.preventDefault()
      }
      if (code1 === 1 && code2 === 1) {
        VueFunctions.method(WindowType.COMBINATION_KEYS_ALT_AND_1)
      }
      if (code1 === 1 && code3 === 1) {
        VueFunctions.method(WindowType.COMBINATION_KEYS_ALT_AND_B)
      }
    }
    document.onkeyup = function (e) {
      if (e.keyCode === 66) {
        code3 = 0
      }
      if (e.keyCode === 49) {
        code2 = 0
      }
      if (e.keyCode === 18) {
        code1 = 0
      }
    }
  },
  data () {
    return {
      // 页面加载loading
      iframeLoading: true,
      // 默认首页页面
      iframeSrc: this.getIframeSrc(),
      // 显示页面 iframe 的 width
      width: '100%',
      height: '',
      // 背景图片地址
      backgroundImage: BackgroundImage,
      // 是否全白
      isNone: false,
      // 组件菜单是否显示
      compmenuShow: true
    }
  },
  computed: {
    ...mapGetters([
      'currentIframeSrc'
    ]),
    ...mapState([
      'design'
    ])
  },
  watch: {
    currentIframeSrc: {
      handler (newValue) {
        if (this.iframeSrc !== newValue) {
          // 开始加载
          this.iLoading()
          this.iframeSrc = newValue
        }
      },
      deep: true
    }
  },
  methods: {
    // 获取iframeSrc路径
    getIframeSrc () {
      if (!this.currentIframeSrc) {
        if (!this.$store.state.design || !this.$store.state.design.iframeSrc || this.$store.state.design.iframeSrc.length < 1) {
          let homePath = DesignFunctions.getDesignPath(this.$store.state.host.id, this.$store.state.site.site.id)
          this.$store.dispatch('designSetIframeSrc', homePath)
          return this.$store.state.design.iframeSrc
        }
        return this.$store.state.design.iframeSrc
      }
      return this.currentIframeSrc
    },
    // 开始加载
    iLoading () {
      this.iframeLoading = true
    },
    // 左侧组件菜单控制
    compmenuCtrl () {
      this.compmenuShow = !this.compmenuShow
    }
  },
  components: {
    DesignMenu,
    DesignDialog,
    DesignLeftOpteration,
    WindowFunc,
    DesignCompmenu
  }
}

</script>

<style scoped lang="scss">
.design {
  width: 100%;
}
.design .main {
  text-align: center;
  min-height: calc(100vh - 48px);
  margin-left: 0;
  -webkit-transition: margin-left 0.5s;
  transition: margin-left 0.5s;
}
.design .main iframe {
  min-height: calc(100vh - 48px);
}
.design .none {
  display: none;
}
.compmenubox{
  position: absolute;
  z-index: 9;
  left:-260px;
  top: 48px;
  bottom: 0;
  padding-right:5px;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  .compmenub{
    width: 260px;
    height: 100%;
    background: #fbfbfb;
    -webkit-transition: left 0.5s;
    transition: left 0.5s;
    border-right:1px solid #eee;
    .compmenuguide{
      position: absolute;
      right: -3px;
      top: 50%;
      margin-top: -75px;
      width: 8px;
      height: 150px;
      line-height: 150px;
      text-align: center;
      background: #258FFB;
      color: #fff;
      font-size: 80%;
      i{
        margin: 0 -4px;
      }
    }
  }
  &:hover{
    left: 0;
    .compmenuguide i{
      transform: rotate(180deg);
    }
  }
}
</style>
